<template>
  <div class="w-full rounded-lg" style="box-shadow:0 0 10px 5px #f6e65e">
    <div class="w-full bg-white shadow rounded-lg w-full border border-periwinkle-gray">
      <div class="border-b border-fog undefined">
        <div class="flex justify-end items-center gap-3 cursor-pointer p-3 hover:bg-gray-100" @click="openSearch">
          <div class="flex-1 text-cape-cod cursor-pointer flex-1">
            <div>
              <div class="flex gap-2 items-center">
                <button
                  class="border border-spindle text-ink bg-link-water rounded-lg font-bold p-2 text-xs flex flex-row items-center gap-3 leading-3 cursor-pointer select-none">Beta</button>
                <div class="flex flex-col">
                  <div class="flex items-center">Exclude Ingredients
                    <!-- 小图标 -->
                    <div class="relative ml-2" @mouseover="iconHover" @mouseleave="iconHover">
                      <svg class="w-6 h-6 cursor-pointer" title="Disclaimer" width="16px" height="16px"
                        viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink">
                        <title>Icons/Alert</title>
                        <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                          <g id="Icons/Alert" fill="currentColor">
                            <path
                              d="M16,8 C16,12.4183 12.4183,16 8,16 C3.58172,16 0,12.4183 0,8 C0,3.58172 3.58172,0 8,0 C12.4183,0 16,3.58172 16,8 Z M9,12 C9,12.5523 8.5523,13 8,13 C7.44772,13 7,12.5523 7,12 C7,11.4477 7.44772,11 8,11 C8.5523,11 9,11.4477 9,12 Z M8,3 C7.44772,3 7,3.44772 7,4 L7,8 C7,8.5523 7.44772,9 8,9 C8.5523,9 9,8.5523 9,8 L9,4 C9,3.44772 8.5523,3 8,3 Z"
                              id="Shape"></path>
                          </g>
                        </g>
                      </svg>
                      <div v-if="isTipsShow"
                        class="absolute z-50 -left-48 w-64 rounded text-md text-center bg-white border-2 border-periwinkle-gray text-black p-2 duration-200 ease-in-out">
                        Disclaimer: some ingredients are also food products (e.g. bread).<br><br>In these cases,
                        excluding bread as
                        an ingredient will only exclude foods that contain bread in the ingredients list.<br><br>If you
                        want to
                        exclude a product like bread, then you will need to exclude the specific ingredients such as
                        wheat or flour.
                      </div>
                    </div>
                  </div>
                  <span class="text-xs text-gray-400">Free for a limited time</span>
                </div>
              </div>
            </div>
          </div>
          <svg class="w-4 h-4 text-periwinkle-gray mr-1 transform rotate-180" width="16px" height="16px"
            viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink">
            <title>Icons/Chevron down</title>
            <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round"
              stroke-linejoin="round">
              <g id="Icons/Chevron-down" stroke="currentColor" stroke-width="1.71428571">
                <polyline id="Path" points="14 5 8 11 2 5"></polyline>
              </g>
            </g>
          </svg>

        </div>

        <div class="relative p-3" v-show="isOpenSearch">
          <div class="flex flex-col gap-2 select-none">
            <div></div>
            <div class="w-full">

              <input type="text" v-model="searchKey"
                class="block w-full border border-steel rounded p-2 text-cape-cod placeholder-steel"
                placeholder="Search ingredients" @input="onSearch">
              <div class="text-sm hover:underline text-ink pt-1 px-2 pb-2 cursor-pointer" v-if="!!searchKey && total">
                Exclude all
                "{{searchKey}}"
                related ingredients?</div>
            </div>
            <p v-if="searchKey && !total" class="text-gray-400 text-sm text-center">Nothing to show</p>
            <div>
              <div v-if="total> 10" class="text-base cursor-pointer flex justify-start items-center gap-2 
      p-2 whitespace-normal select-none">
                <div class="w-4.5 h-4.5 border rounded flex justify-center items-center border-steel bg-transparent">
                </div>
                <div class="text-cape-cod inline-flex whitespace-normal flex-row flex-wrap items-center">Select all
                </div>
              </div>

              <div v-for="item in searchTagList" :key="item.value" class="text-base cursor-pointer flex justify-start items-center gap-2 
      p-2 whitespace-normal select-none">
                <div class="w-4.5 h-4.5 border rounded flex justify-center items-center border-steel bg-transparent">
                </div>
                <div class="text-cape-cod inline-flex whitespace-normal flex-row flex-wrap items-center">
                  {{item.value}}<span class="pl-1 text-sm text-gray-400">({{item.count}})</span></div>
              </div>
            </div>
            <div class="flex flex-col justify-start items-center gap-1" v-if="total>10" @click="loadMore">
              <div class="text-xs text-cape-cod">Displaying {{searchTagList?.length}} items.</div><button
                class="block text-sm font-bold text-ink">Show more</button>
            </div>
            <p class="text-gray-400 text-sm text-center" v-if="!searchKey">
              Type keywords above to find ingredients
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { getSearchTagList } from '@/api/Tag'
import { defineComponent, ref } from 'vue'
import debounce from 'lodash/debounce'
import trim from 'lodash/trim'
import chunk from 'lodash/chunk'
export default defineComponent({
  setup() {
    const isOpenSearch = ref(false)
    const isTipsShow = ref(false)
    const searchTagList = ref([])
    const searchKey = ref('')
    const pageSize = ref(10)
    const currentPage = ref(1)
    const total = ref(0);
    const tagList = ref([])


    const openSearch = () => {
      isOpenSearch.value = !isOpenSearch.value
    }

    const iconHover = () => {
      isTipsShow.value = !isTipsShow.value
    }
    // 搜索
    const onSearch = debounce(async (e) => {
      searchKey.value = trim(e.target.value) || ''
      const rep: any = await getSearchTagList({
        facetQuery: searchKey.value
      })
      total.value = rep.facetHits.length || 0
      tagList.value = rep.facetHits || []
      const paginatedData = chunk(tagList.value, pageSize.value) as any
      searchTagList.value = paginatedData[currentPage.value]
      if (!searchKey.value) {
        total.value = 0
        tagList.value = []
        searchTagList.value = []
      }
    }, 300)

    const loadMore = () => {
      currentPage.value++;
      const paginatedData = chunk(tagList.value || [], pageSize.value) as any
      searchTagList.value = searchTagList.value.concat(paginatedData[currentPage.value])
    }

    return { isOpenSearch, isTipsShow, searchKey, total, searchTagList, openSearch, iconHover, onSearch, loadMore }
  }
})
</script> 
